<template>
	<view>
		<view class="header">
			<button size="mini" class="change_btn" style="margin-left: 0;">取 消</button>
			<button size="mini" class="change_btn">确 定</button>
		</view>
		<uni-forms ref="form" :modelValue="form" class="paddingAll" :rules="rules" labelAlign="right" label-width="180rpx">
		<!-- 绑定签署流程模板 -->
		<div class="bg-page">
			<div class="header_page" style="display: flex;align-items: center;">
			    <span>绑定签署流程模板</span>
			    <button size="mini" style="float:right;" class="white_btn" @click="addContractTemplate">添加签署流程</button>
			</div>
		  <uni-data-select v-model="form.contractTypeId" :localdata="contractArr" :clear="false" placeholder="发起合同时自定义设置签约流程"></uni-data-select>
		</div>
		
		<!-- 合同发起方 -->
		<div class="bg-page">
		  <div class="header_page">签约发起人</div>
		<select-tree ref="tkitree" :range="deptOptions" confirmColor="#00a660" placeholder="请选择流程管理员" v-model="form.manageIds" disabled />
		</div>
		
		<!-- 普通合同签约文件及签署要求 -->
		<div class="bg-page" v-if="form.contractSignFileType==1">
		  <div class="header_page">签约文件及签署要求</div>
		  <div style="padding:6px 0;background: #fff;">
		      <uni-forms-item style="margin:10rpx 0">
				  <span slot="label" class="custom_label">合同文件</span>
				  <uni-easyinput style="width: 98%;" disabled type="text" v-model="placeholderData" />
		      </uni-forms-item>
		    <uni-forms-item prop="seconde_form" style="margin-bottom:10rpx">
				<span slot="label" class="custom_label">签署要求</span>
		        <!-- 二级表单 -->
		        <uni-forms size="small" labelWidth="170rpx" labelPosition="top" class="check_form">
		          <uni-forms-item style="margin-bottom:10rpx">
					  <span slot="label" class="custom_label">企业发起方</span>
					  <uni-data-checkbox multiple v-model="form.isCompanySign" :localdata="companySignArr" class="status_sign"></uni-data-checkbox>
		          </uni-forms-item>
		          <uni-forms-item style="margin-bottom:10rpx">
					  <span slot="label" class="custom_label">企业接收方</span>
					  <uni-data-checkbox multiple v-model="form.isCompanySignReceive" :localdata="companySignArr" class="status_sign"></uni-data-checkbox>
		          </uni-forms-item>
		          <uni-forms-item prop="isPersonSign" style="margin-bottom: 10rpx">
					  <span slot="label" class="custom_label">个人接收方</span>
					  <uni-data-checkbox multiple v-model="form.isPersonSign" :localdata="personalSignArr" class="status_sign"></uni-data-checkbox>
		          </uni-forms-item>
		        </uni-forms>
		    </uni-forms-item>
		  </div>
		</div>            
		
		<!-- 标准合同签约文件及签署要求 -->
		<div class="bg-page" v-if="form.contractSignFileType==0">
			<div class="header_page" style="display: flex;align-items: center;">
			    <span>签约文件及签署要求</span>
			    <button size="mini" style="float:right;" class="white_btn" @click="addContractTemplate">添加合同模板</button>
			</div>
		<div style="padding:12rpx 0;background: #fff;">
		<uni-forms-item prop="contractTypeId" style="margin:10rpx 0;">
			<span slot="label" class="custom_label">合同模板</span>
		    <div v-for="(item,index) in contractTemplateList" :key="index" :class="!!item.id && contractTemplateList.length>1?'nomarginBott':'marginBott'">
		      <uni-easyinput style="width: 98%;" disabled placeholder="请绑定在线合同模板" type="text" v-model="item.name" suffixIcon="close" @iconClick="deleteContractTemplate(item)"/>
			  <button class="green_btn" @click="openSelectTemplate(form,item)" size="mini" style="margin-top:20rpx">绑定</button>
			  <uni-data-checkbox :localdata="signRequire" style="padding-top: 14rpx;" v-if="!!item.id && contractTemplateList.length>1" v-model="item.isUseSignSet"></uni-data-checkbox>
		    </div>
		  </uni-forms-item>
		<uni-forms-item style="margin-bottom:10rpx;">
			<span slot="label" class="custom_label">签署要求</span>
		    <!-- 二级表单 -->
		      <uni-forms size="small" labelWidth="170rpx" labelPosition="top" class="check_form">
		        <uni-forms-item label="企业发起方：" prop="contractTemplateIds" style="margin-bottom:0">
		          <span v-if="currentRow.signSet==null">使用标准合同模板设置的签署要求</span>
		          <div v-else>
					  <uni-data-checkbox multiple v-model="currentRow.signSet" disabled :localdata="companySignArr" class="status_sign"></uni-data-checkbox>
		        </div>
		        </uni-forms-item>
		        <uni-forms-item label="企业接收方：" prop="contractTemplateIds" style="margin-bottom:0">
		          <span v-if="currentRow.signSet==null">使用标准合同模板设置的签署要求</span>
		          <span v-else>
					<uni-data-checkbox multiple v-model="currentRow.signSet" disabled :localdata="companySignArr" class="status_sign"></uni-data-checkbox>
		        </span>
		        </uni-forms-item>
		        <uni-forms-item label="个人接收方：" prop="contractTemplateIds" style="margin-bottom:0">
		          <span v-if="!currentRow.signPerson">使用标准合同模板设置的签署要求</span>
		          <span v-else>
					<uni-data-checkbox multiple v-model="currentRow.signSet" disabled :localdata="personalSignArr" class="status_sign"></uni-data-checkbox>
		        </span>
		        </uni-forms-item>
		      </uni-forms>
		    </uni-forms-item>
			</div>
			</div>
			<!-- 签署人及签署方式 -->
			<div class="bg-page">
			 <div class="header_page" style="display: flex;align-items: center;">
				<span>发起方签署人及签署方式</span>
				<button size="mini" type="success" style="float:right;" class="white_btn" @click="addcard">添加签署人</button>
			</div>
			    <div style="padding:6px 0;background: #fff;">
			    <!-- 只显示签署人数据 -->
			    <uni-forms-item prop="firstSignPerson" style="margin:12rpx 0">
				  <span slot="label" class="custom_label">签署人</span>
					  <uni-data-select class="headerTwo_content" v-model="form.contractSignFileType" :localdata="selectFileArr" :clear="false" placeholder="请选择签署人" />
			    </uni-forms-item>
			    <uni-forms-item prop="ecSealCompanyId" style="margin-bottom:12rpx;">    
				  <span slot="label" class="custom_label">盖章方式</span>
				  <uni-data-select class="headerTwo_content" v-model="form.contractSignFileType" :localdata="selectFileArr" :clear="false" placeholder="请选择盖章方式" />
			    </uni-forms-item>
			    <!-- 普通合同签字方式 -->
			    <uni-forms-item prop="isCompanySign" v-if="form.contractSignFileType==1" style="margin-bottom:12px;">
					<span slot="label" class="custom_label">签字方式</span>
					<uni-data-select class="headerTwo_content" :disabled="firstSignPerson.companySignType==null" v-model="form.contractSignFileType" :localdata="selectFileArr" :clear="false"  placeholder="请选择签字方式" />
			    </uni-forms-item>
			    <!-- 在线模板签字方式 -->
			    <uni-forms-item label="签字方式" prop="isCompanySign" v-if="form.contractSignFileType==0" style="margin-bottom:12px;">
					<span slot="label" class="custom_label">签字方式</span>
					<uni-data-select class="headerTwo_content" :disabled="firstSignPerson.companySignType==null" v-model="form.contractSignFileType" :localdata="selectFileArr" :clear="false"  placeholder="请选择签字方式" />
			    </uni-forms-item>
			    <div v-for="(option, index) in selectSealData" :key="index">
			      <!-- 分割线 -->
			      <div style="border-top:1px dashed #ccc;padding-top: 40rpx;margin: 0 20rpx;content:'';"></div>
			      <uni-forms-item prop="firstSignPerson" style="margin-bottom:12rpx;">
					  <span slot="label" class="custom_label">签署人</span>
					  <div class="headerTwo_content">
						<uni-data-select v-model="form.contractSignFileType" :localdata="selectFileArr" :clear="false"  placeholder="请选择签署人" />
						<span @click="delSign(index)" style="margin:0 20rpx;"><i class="iconfont delIcon">&#xe8c1;</i></span>
					  </div>
			          <!-- 删除 -->
			      </uni-forms-item>
			      <uni-forms-item prop="ecSealCompanyId" style="margin-bottom:12rpx;">
					  <span slot="label" class="custom_label">盖章方式</span>
					  <uni-data-select v-model="form.contractSignFileType" class="headerTwo_content" :localdata="selectFileArr" :clear="false"  placeholder="请选择盖章方式" />
			    </uni-forms-item>
			    <!-- 普通合同签字方式 -->
			        <uni-forms-item prop="isCompanySign" v-if="form.contractSignFileType==1" style="margin-bottom:12rpx;">
						<span slot="label" class="custom_label">签字方式</span>
						<uni-data-select v-model="form.contractSignFileType" class="headerTwo_content" :localdata="selectFileArr" :clear="false"  placeholder="请选择签字方式" />
			        </uni-forms-item>
			          <!-- 在线模板签字方式 -->
			          <uni-forms-item prop="isCompanySign" v-if="form.contractSignFileType==0" style="margin-bottom:12rpx;">
						  <span slot="label" class="custom_label">签字方式</span>
						  <uni-data-select v-model="form.contractSignFileType" class="headerTwo_content" :localdata="selectFileArr" :clear="false"  :placeholder="contractTemplatePlaceholder"/>
			          </uni-forms-item>
			            </div>
			          <div class="text_page" v-if="selectSealData.length>0">签署人有多位时：由经办人发起合同时，根据需求选择其中一位签署即可！</div>
			      </div>
	       </div>
		</uni-forms>
	</view>
</template>
<script>
	import { treeSelectAndStaff } from "@/api/ec/console/org/dept";
	import {listByCompanyId} from "@/api/ec/console/busiConfig/contractType";
	import {listBycontractTypeId} from "@/api/ec/console/busiConfig/contractBusinessType";
	export default {
		data() {
			return {
				contractTemplatePlaceholder:'使用标准合同模板设置的签署要求',
				placeholderData:'发起签约时，请上传本地Word文件，需本地编辑完善', //合同文件
				// 签字方式 默认-1  无需签名
				signTypeList:[{name:'标准签字章',id:1},{name:'手写签字章',id:2}],
				// 选中的签署人数组
				selectSealData:[{isStarter:0}],
				// 选中的第一个签署人数据
				firstSignPerson: {id:null,label:null},      
			    // 当前操作的行
			    currentRow:{signSet:null,signPerson:null},
				// 添加的模板list
				contractTemplateList:[{
				  ids:Math.random(),
				  name:null,
				  id:null,
				}],      
				deptOptions: null, // 发起方 使用人数据
				signRequire:[{text:'使用标准合同模板设置的签署要求',value:1}],
				selectFileArr:[{text:'普通合同签署流程',value:1},{text:'标准合同签署流程',value:0}], //流程类型
				processStatus: [{
					text: '启用',
						value: 0
					}, {
						text: '停用',
						value: 1
					}],	
				// 企业印章
				companySignArr: [{
					text: '企业印章',
					value: 0
					}, {
					text: '授权人签字章',
					value: 1
					}],	
				// 个人签名
				personalSignArr: [{
					text: '手写签字章',
					value: 0
					}, {
					text: '标准签字章',
					value: 1
					}],	
				contractArr: [], //合同类型
				form: {status:1,},
				rules: {
					name: {rules:[{
						required: true,
						errorMessage: "请输入模板名称",
						trigger: "blur"
					}, ]},
				},	
			}
		},
		onLoad(option) {
			this.getContractType()
			this.initDept()
			this.contractTemplatePlaceholder='使用标准合同模板设置的签署要求';
			if(option.id){
				let id = option.id
				getTemplate(id).then((response)=>{
					this.form = response.data;
				})
			}
		},
		methods: {
			/** 删除 */
			delSign(index){
			   this.selectSealData.splice(index,1)
			 },         
			/** 添加按钮 */
			addcard(){
			  // 签字方式 先判断文件类型 根据文件类型判断签名要求
			  // 在线模板
			  let companySignType=null;
			  if(this.form.contractSignFileType==0 && this.currentRow.signSet==1){
			    companySignType = 1;// 标准
			  }
			  // 本地文件
			  if (this.form.contractSignFileType == 1 && this.form.isCompanySign == 1) {
			    companySignType = 1;//标准
			  }
			  this.selectSealData.push({
			    companySignType:companySignType,// 默认标准签字章
			    ecSealCompanyId:null,
			    isStarter:0,
			    index:this.selectSealData.length+1,
			  })
			},     
			// 初始 发起方员工部门
			initDept() {
			  let data = { isCertify: 1, status: 1 };
			  treeSelectAndStaff(data).then((response) => {
			    this.deptOptions = response.data;
			  });
			},        
		  /** 合同类型 */
		  getContractType() {
		    // 根据当前登录公司 查询合同类型
		    listByCompanyId().then((response) => {
		        let data = response.data;
		  	  var list = []
		  	  for(var i = 0;i<response.data.length;i++){
		  	  	var object = {};
		  	  	object.text = response.data[i].name; // 展示text
		  	  	object.value = response.data[i].id; // 用id查询
		  	  	list.push(object);							
		  	  }
		  	  this.contractArr = list
		      })
		  },  
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-select{
		background: #fff;
	}
	.headerTwo_content{
	  background: #fff;
	  padding:0px 10rpx 20rpx 0px;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.check_form{
		::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label{
			padding: 0;
		}
		::v-deep .uni-forms-item__label{
			height: 32rpx;
			margin-top: 16rpx;
			color: #777777;
		}
	}
	// 自定义label 表单插槽
	.custom_label{
	 width: 140rpx;
	 text-align: center;
	 padding-top: 14rpx;
	 color: #606266;
	}
	.header_content{
	  background: #fff;
	  padding: 20rpx;
	}
	.header_page{
	  color: $uni-color-primary;
	  background: #e6f6ef;
	  padding: 12rpx 16rpx;
	}
	.text_page{
	  color: $uni-color-primary;
	  background: #e6f6ef;
	  padding: 8rpx 10rpx;
	  margin: 0 10rpx 20rpx 10rpx;
	  font-size: 24rpx;
	}
	.bg-page{
	  background:rgb(240, 240, 240);
	  padding: 14rpx;
	  margin: 20rpx 0 20rpx 10rpx;
	}
	::v-deep .status_checkbox .checklist-group .checklist-box{
		justify-content: space-between;
		width: 22%;
	}
	::v-deep .status_sign .checklist-group .checklist-box{
		justify-content: space-between;
		width: 35%;
	}
	::v-deep .uni-forms-item{margin-bottom: 30rpx;}
	.paddingAll{padding: 0px 30rpx 0 10rpx;}
	page{background: $uni-bg-color;}
	// 头部按钮显示
	.header{
		background: #bde8bf;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		.change_btn{
			background: #fff;
			margin-right: 0;
			height:50rpx;
			line-height: 50rpx;
			color: $uni-color-primary;
			border:1rpx solid $uni-color-primary;
			font-size: 28rpx;
		}
	}
</style>
